<!DOCTYPE html>
<html lang="en">
<head>
  <link href="//cdn.bootcss.com/zui/1.5.0/css/zui.min.css" rel="stylesheet">
  <style>
    .class1 {
      color: red
    }
  </style>

</head>
<body>

<div class="panel panel-warning" id="app" v-bind:style="styleObject">
  <div class="panel-heading">绑定style的演示</div>
  <div class="panel-body">
    <h1>{{name}}</h1>
    <div>{{mine.msg}}</div>
    <div>{{mine.remark}}</div>
  </div>
</div>


<script src="//cdn.bootcss.com/vue/2.2.1/vue.js"></script>
<script>
  // 创建对应的模板VUE实例
  var vm = new Vue({
    el: '#app', // el: elements  Vue对应的根标签
    data: { // 对应的数据
      flag: true,
      name: '摘下闪闪满天星',
      styleObject: {
        width: "600px",
        height: "400px",
        "margin-left":"300px"
      },
      mine: {
        msg: "天雨大不润物根草，道法宽只渡有缘人",
        remark: 'margin-left中间带有下划线的属性，必须加上双引号，不然会渲染失败',
      }
    }
  })
</script>
</body>
</html>
